<template>
  <div class="app-container">
    <ManageTitle name="林支持" role="管理员" />
    <section class="mt20" style="width: 600px;">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
        <el-row>
          <el-col :span="3.5">
            <el-form-item prop="searchStr">
              <el-input
                v-model="queryParams.searchStr"
                placeholder="请输入锁名称"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery"
              >
                <template #append>
                  <el-button :icon="Search" @click="handleQuery" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <div style="margin-left: auto;">
            <el-button plain type="primary" @click="handleSendCard">发卡</el-button>
          </div>
        </el-row>
      </el-form>
      <el-table :data="list" class="mt20" stripe style="width: 100%">
        <el-table-column prop="cardNumber" label="卡号" width="180" />
        <el-table-column prop="lockNum" label="锁数量（可开）" width="180" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-space>
              <el-button link type="primary" @click="handleDistrifbute(scope.row, scope.$index)">下发</el-button>
              <el-button link type="primary" @click="handleRemove(scope.row, scope.$index)">删除开门权限</el-button>
            </el-space>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </section>
    <el-dialog title="" v-model="readCardVisible" width="450px" :fullscreen="mobile">
      <div class="text-center">
        <img :src="readcardUrl" alt="" width="180">
        <div class="mt20">请将IC卡放置在读卡器上</div>
        <el-button link type="primary" class="mt20" @click="handleSwitch"> 手动输入</el-button>
      </div>
    </el-dialog>
    <el-dialog title="手动输入" v-model="inputVisible" width="450px" :fullscreen="mobile">
      <el-form :model="cardForm" ref="cardFormRef">
        <el-form-item label="手动输入" prop="card" :rules="[
          { required: true, message: '请手动输入IC卡号', trigger: 'blur' },
          { pattern: /^\d{6,10}$/, message: '卡号错误，请输入正确的IC卡号', trigger: 'blur' }]"
        >
          <el-input v-model="cardForm.card" placeholder="请手动输入IC卡号"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleInputOk">确认</el-button>
      </template>
    </el-dialog>
    <!-- 下发成功 -->
    <el-dialog title="" v-model="distributeVisible" width="350px" :fullscreen="mobile" @close="() => distributeVisible = false">
      <div style="height: 36px;" v-loading="distributeLoading">
        <div v-if="!distributeLoading" class="flex-row-center" style="justify-content: center;height: 36px;">
          <el-icon color="#3bad4b" size="20px"><SuccessFilled  /></el-icon>
          <span class="ml10">下发成功</span>
        </div>
      </div>
      <template #footer>
        <div class="text-center">
          <el-button @click="() => distributeVisible = false" type="primary">确认</el-button>
        </div>
      </template>
    </el-dialog>
    <KeyOperationDl
      :visible="keyOperation.visible"
      :type="keyOperation.type"
      :title="keyOperation.title"
      @cancel="handleKeyOperationCancel"
      @ok="handleKeyOperationOk"
    >
    </KeyOperationDl>
  </div>
</template>
<script setup name="CardManage">
import useAppStore from '@/store/modules/app'
import readcardUrl from '@/assets/images/read-card.png'
import ManageTitle from '../component/manageTitle.vue'
import { Search } from '@element-plus/icons-vue'
import KeyOperationDl from '../component/keyOperationDl.vue'

const { proxy } = getCurrentInstance()

const readCardVisible = ref(false)
const inputVisible = ref(false)
const distributeVisible = ref(false)
const distributeLoading = ref(false)
const list = ref([])
const total = ref(0)
const data = reactive({
  queryParams: {
    searchStr: null,
    pageNum: 1,
    pageSize: 10
  },
  cardForm: {
    card: ''
  },
  keyOperation: {
    visible: false,
    type: 'distribute',
    title: '下发'
  }
})
const { queryParams, cardForm, keyOperation } = toRefs(data)

const mobile = computed(() => useAppStore().device === 'mobile')

/* 搜索 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/* 发卡 */
function handleSendCard() {
  readCardVisible.value = true
}

/* 切换手动输入iC卡 */
function handleSwitch() {
  readCardVisible.value = false
  // cardForm.value.card = ''
  proxy.resetForm('cardFormRef')
  inputVisible.value = true
}

/* 确认提交手动输入卡号 */
function handleInputOk() {
  proxy.$refs['cardFormRef'].validate(valid => {
    if (valid) {
      console.log(cardForm.value);
      // proxy.$modal.msgSuccess('卡号发送成功')
      inputVisible.value = false
      keyOperation.value.visible = true
    }
  })
}

/* 发卡弹窗 */
function handleKeyOperationCancel() {
  keyOperation.value.visible = false
}
function handleKeyOperationOk(type, value) {
  console.log(value)
  keyOperation.value.visible = false
  distributeLoading.value = true
  distributeVisible.value = true
  // 下发成功弹窗提醒
  setTimeout(() => {
    distributeLoading.value = false
  }, 1500);
}

/* 下发 */
function handleDistrifbute() {
  keyOperation.value.visible = true
}
// 删除开门权限
function handleRemove() {
  keyOperation.value.type = 'remove'
  keyOperation.value.title = '删除'
  keyOperation.value.visible = true
}

function getList() {
  list.value = [{
    cardNumber: '123123',
    lockNum: 1
  }]
  total.value = 1
}
getList()
</script>
